<template name="my">
	<view class="my">
		<scroll-view scroll-y>
			<view class="toppart">
				<view class="userinfos">
					<view class="userinfo-avatars">
						<open-data type="userAvatarUrl"></open-data>
					</view>
					<view class="user" v-if="user">
						<open-data type="userNickName"></open-data>
						<view
							class="phoneNumber"							
						>{{ user }}</view>
					</view>
					<view class="user" v-else>
						<view @click="gologin">登录</view>
					</view>
				</view>
				<!-- <img
					src="/static/img/bg.png"
					alt=""
					class="hubg"
				/> -->
				<view class="cu-card case mycardt">
					<view class="cu-item shadow">
						<view class="top">
							<text class="bangzhu">帮助中心</text>
							<!-- <view>
                            <text class="more">
                                更多菜单
                            </text>
                            <img
                                src="/static/img/youhui.png"
                                alt=""
                                class="youhui"
                            />
                        </view> -->
						</view>

						<view style="padding:0 20px">
							<!-- <view class="bottom" @click="wei">
								<view class="paopao">
									<img src="/static/img/paopao.png" alt="" class="titleimg" />
									<text>审核无法通过</text>
								</view>
								<img src="/static/img/youlan.png" alt="" class="youlan" />
							</view> -->
							<button
								class="shares"
								open-type="share"
							>
								<view class="bottom">
									<view class="paopao">
										<img
											src="/static/img/paopao.png"
											alt=""
											class="titleimg"
										/>

										<text class="color">分享给好友</text>
									</view>
									<img
										src="/static/img/youlan.png"
										alt=""
										class="youlan"
									/>
								</view>
							</button>

							<view
								class="bottom"
								@click="call"
							>
								<view class="paopao">
									<img
										src="/static/img/paopao.png"
										alt=""
										class="titleimg"
									/>
									<text class="color">联系客服</text>
								</view>
								<img
									src="/static/img/youlan.png"
									alt=""
									class="youlan"
								/>
							</view>
							<view
								class="bottom"
								@click="nopaizhao"
								style="margin-bottom: 20px;border-bottom: none;"
							>
								<view class="paopao">
									<img
										src="/static/img/paopao.png"
										alt=""
										class="titleimg"
									/>
									<text class="color">最后一步无法拍照</text>
								</view>
								<img
									src="/static/img/youlan.png"
									alt=""
									class="youlan"
								/>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view
				class="tui"
				v-if="user"
			>
				<button
					class="cu-btn bg-red margin-tb-sm lg"
					@click="logout"
				>
					退出登录
				</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from "vuex";

	export default {
		name: "my",
		data() {
			return {};
		},
		computed: {
			...mapState(["user"])
		},
		methods: {
			...mapMutations({
				setUser: "setUser"
			}),
			gologin(){
				uni.switchTab({
					url: "/pages/home/home"
				});
			},
			logout() {
				uni.showModal({
					title: "提示",
					content: "确定退出登录吗？",
					success: res => {
						if (res.confirm) {
							uni.removeStorageSync("phone");
							uni.showToast({
								title: "退出成功",
								duration: 2000,
								mask: true
							});
							this.setUser("");
							uni.switchTab({
								url: "/pages/home/home"
							});
							console.log("用户点击确定");
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					}
				});
			},
			feedback() {
				uni.navigateTo({
					url: "/pages/feedback/uni-feedback"
				});
			},
			wei() {
				uni.navigateTo({
					url: "/pages/detail/detail"
				});
			},
			yichang() {
				uni.navigateTo({
					url: "/pages/detail/yichang"
				});
			},
			nopaizhao() {
				console.log(22);
				uni.navigateTo({
					url: "/pages/detail/detail"
				});
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: "400 188 2160" //仅为示例
				});
			}
		},
		onShow() {
			uni.showShareMenu({
				withShareTicket: true
			});
			let user = uni.getStorageSync("phone");
			this.setUser(user);
			if (!user) {
				// uni.navigateTo({
				// 	url: "/pages/login/login"
				// });
			}
		},
		onShareAppMessage: function(res) {
			if (res.from === "button") {
			}
			return {
				title: "e秒安心住",
				path: "/pages/home/home",
				success: function(res) {
					console.log("成功", res);
				}
			};
		}
	};
</script>

<style>
	.my{
		height: 100%;
		background: #fff;
	}
	.toppart {
		/* height: 320rpx; */
		/* background-image: url(/static/img/youlan.png); */
		width: 100%;
		/* position: relative; */		
	}

	.user {
		font-size: 18px;
		font-family: ArialMT;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.userinfos {
		width: 750upx;
		height: 440upx;
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* background: #4382ff; */
		background: url("../../static/img/bg.png") no-repeat center center;
		background-size: 100% 440upx;				
		padding-top: 50upx;
	}

	.userinfo-avatars {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		border-radius: 50%;
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		margin-left: 10px;
	}

	.userinfo {
		font-size: 14px;
	}

	.my .phoneNumber {
		margin-top: 10px;
	}

	.my .title {
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		padding-top: 20px;
	}

	.mycardt {
		margin-top: -80upx;
	}

	.mycardt .top {
		display: flex;
		justify-content: space-between;
		height: 123rpx;
		align-items: center;
		padding: 0 20px;
	}

	.mycardt .bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
		font-size: 14px;
		height: 55px;
		font-size: 14px;
		font-family: AlibabaPuHuiTiR;
		font-weight: 400;
		color: rgba(121, 121, 121, 1);
	}

	.rightjiantou {
		height: 10px;
		width: 10px;
	}

	.titleimg {
		height: 15px;
		width: 15px;
		margin-right: 5px;
	}

	.mycontent {
		width: 100%;
		height: 151rpx;
		display: flex;
		padding: 10px;
	}

	.mycontentl {
		padding-left: 10px;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.mycontentr {
		padding-left: 20px;
		flex: 1;
		border-left: 2px solid #f5f5f5;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.changyong {
		font-size: 16px;
		color: #767676;
		font-weight: bolder;
	}

	.changyongtitle {
		color: #787878;
		font-size: 13px;
	}

	.changyong img {
		height: 10px;
		width: 5px;
		margin-left: 10px;
	}

	.mycardt .top text {
		font-size: 36upx;
		color: #000;
	}

	.bottom .paopao {
		display: flex;
		align-items: center;
	}

	.tuichu {
		background: #4382ff !important;
		color: white !important;
	}

	.youlan {
		height: 24upx;
		width: 28upx;

	}

	.youhui {
		height: 10px;
		width: 5px;
		margin-left: 5px;
	}

	.shares {
		position: none;
		margin-left: 0;
		background-color: white;
		border: none;
		padding-left: 0px;
		line-height: inherit;
	}

	.shares::after {
		border: none;
	}

	.bangzhu {
		font-size: 18px;
		font-family: AlibabaPuHuiTiM;
		font-weight: 500;
		color: rgba(121, 121, 121, 1);
	}

	.mycardt .top text.more {
		font-size: 12px;
	}

	.tui {
		width: 80%;
		background: #558DFE !important;
		color: white;
		font-size: 28rpx !important;
		position: fixed;
		left: 10%;
		bottom: 100upx;
		letter-spacing: 4upx;
		height: 86upx !important;
		border-radius: 16upx;
	}

	.tui button {	
			width: 100%;
			background: #558DFE !important;			
	}

	.logout {
		color: #767676 !important;
	}

	.gang {
		background: #767676;
		line-height: 1px;
		width: 15px;
		height: 1px;
	}

/* 	.hubg {
		position: absolute;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	} */

	.shares {
		position: none;
		margin-left: 0;
		background-color: white;
		border: none;
		padding-left: 0px;
		line-height: inherit;
		font-size: 12px;
		color: black;
		padding-right: 0px;
	}

	.shares::after {
		border: none;
	}
	.my .cu-item {
		/* box-shadow: -2px 2px 5px 2px #f2f2f2, 2px -2px 5px 0px #f2f2f2; */
		box-shadow: 1px 2px 3px 2px #efefef, -1px 1px 2px -1px #bfbfbf;

	}
	.color{
		color: #000 !important;
	}
	.my .cu-btn.lg{
		padding: 0px !important;
		margin-top: 0upx;
	}
</style>
